<template>
  <div class="wrapper">
    <div class="header-box">
      <header>
        <i class="fa fa-angle-left" @click="router.go(-1)"></i>
        <p>重置密码</p>
        <i></i>
      </header>
      <div class="top-ban"></div>
      <img src="../assets/header.png">
    </div>

    <table class="table-form">
      <tr>
        <td>手机号码</td>
        <td>
          <input
              type="text"
              v-model="form.telId"
              placeholder="请输入注册手机号"
          >
        </td>
      </tr>
      <tr>
        <td>真实姓名</td>
        <td><input type="text" v-model="form.realName" placeholder="请输入注册时的姓名"></td>
      </tr>
      <tr>
        <td>新密码</td>
        <td><input type="password" v-model="form.newPassword" placeholder="请输入新密码"></td>
      </tr>
      <tr>
        <td>确认密码</td>
        <td><input type="password" v-model="form.confirmPassword" placeholder="请再次输入新密码">
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="btn" @click="resetPassword">确认重置</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { reactive ,inject} from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const axios = inject("axios");

const form = reactive({
  telId: '',
  realName: '',
  newPassword: '',
  confirmPassword: ''
});

const resetPassword = () => {
  // 简单表单验证
  if (!form.telId) {
    alert('请输入手机号');
    return;
  }
  if (!form.realName) {
    alert('请输入姓名');
    return;
  }
  if (!form.newPassword) {
    alert('请输入新密码');
    return;
  }
  if (form.newPassword !== form.confirmPassword) {
    alert('两次密码输入不一致');
    return;
  }

  axios.post("supervisor/resetPassword", form)
      .then(response => {
        if (response.data === 1) {
          alert('密码重置成功，请重新登录');
          router.push('/login');
        } else {
          alert('重置失败：手机号或姓名不正确');
        }
      })
      .catch(error => {
        console.log(error);
        alert('重置失败：' + error.message);
      });
};
</script>

<style >

</style>